<div class="mv-s">
    <span class="label label-lg label-default mr-xxs clickable"
        ng-click="dialog.filterSimilarCases('');"
        ng-class="{'label-primary': dialog.currentSimilarFilter===''}">All ({{dialog.event.similarCases.length || 0}})</span>

    <span class="label label-lg label-default mr-xxs clickable"
        ng-repeat="statsItem in dialog.similarCasesStats"
        ng-if="statsItem.value > 0"
        ng-click="dialog.filterSimilarCases(statsItem.key)"
        ng-class="{'label-primary': dialog.currentSimilarFilter===statsItem.key}">{{dialog.CaseResolutionStatus[statsItem.key] || statsItem.key}} ({{statsItem.value}})</span>
</div>

<div class="case-item">
    <div class="case-details text-bold">Title</div>
    <div class="case-date text-bold">Date</div>
    <div class="case-similarity text-bold">Observables</div>
    <div class="case-similarity text-bold">IOCs</div>
    <div class="case-similarity-merge text-bold">Action</div>
</div>

<div class="case-collection" ng-repeat="item in filteredLinks = (dialog.event.similarCases | filter:dialog.similarityFilters | orderBy:dialog.similaritySorts) ">
    <div class="case-item" >
        <!-- case severity -->
        <div class="case-tlp bg-tlp-{{item.tlp}}"></div>

        <!-- case title and main details -->
        <div class="case-details">
            <div class="case-title">
                <a ui-sref="app.case.details({caseId: item.id})" target="_blank">#{{item.caseId}} - {{item.title}}</a>
            </div>
            <div class="case-tags flexwrap mt-xxs">
                <span class="mr-xxxs text-muted"><i class="fa fa-tags"></i></span>
                <strong class="text-muted mr-xxxs" ng-if="!item.tags || item.tags.length === 0">None</strong>
                <span ng-repeat="tag in item.tags track by $index" class="label label-primary mb-xxxs mr-xxxs pointer">{{tag}}</span>
            </div>
            <div class="text-success" ng-show="item.status !== 'Open'">
                <small>
                    (Closed at {{item.endDate | shortDate}} as <strong>{{dialog.CaseResolutionStatus[item.resolutionStatus]}}</strong>)
                </small>
            </div>
            <div class="text-danger" ng-if="item.mergeFrom">
                <small>
                    Merged from <a href ui-sref="app.case.details({caseId: item.mergeFrom[0]})"> Case #{{item.stats.mergeFrom[0].caseId}}</a> and
                    <a href ui-sref="app.case.details({caseId: item.mergeFrom[1]})"> Case #{{utem.stats.mergeFrom[1].caseId}}</a>
                </small>
            </div>
        </div>

        <div class="case-severity">
            <div class="clickable">
                <severity active="false" value="item.severity"></severity>
            </div>
        </div>

        <div class="case-date">
            <span uib-tooltip="{{item.startDate | shortDate}}" tooltip-popup-delay="500" tooltip-placement="bottom">{{item.startDate | shortDate}}</span>
        </div>

        <div class="case-similarity">
            <div>
                <strong>{{(item.similarArtifactCount / item.artifactCount) | percentage:0}}</strong> ({{item.similarArtifactCount}} / {{item.artifactCount}})
                <uib-progressbar class="progress progress-sm" max="item.artifactCount" value="item.similarArtifactCount" type="primary"></uib-progressbar>
            </div>
        </div>
        <div class="case-similarity">
            <div ng-if="item.iocCount > 0">
                <strong>{{(item.similarIocCount / item.iocCount) | percentage:0}}</strong> ({{item.similarIocCount}} / {{item.iocCount}})
                <uib-progressbar class="progress progress-sm" max="item.iocCount" value="item.similarIocCount" type="danger"></uib-progressbar>
            </div>
            <div ng-if="item.iocCount === 0">
                <em>N/A</em>
            </div>
        </div>

        <div class="case-similarity-merge text-center">
            <button class="btn btn-sm btn-primary" ng-click="dialog.mergeIntoCase(item.id)">Merge in this case</button>
        </div>
    </div>
</div>
